<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>安全检查记录</title>
    <link rel="stylesheet" href="../../content/default/css/common1.css">
    <link rel="stylesheet" href="../../content/default/css/swiper.min.css">
    <link rel="stylesheet" href="../../content/default/css/annualRecords.css">
    <link rel="stylesheet" href="../../content/common/layui/css/layui.css">
</head>

<body>
<div class="container">
    <div class="mainDiv">
        <!--左侧导航-->
        <!--右侧主体内容-->
        <div class="scroll_main clearfix">
            <ul class="top_nav clearfix">
                <li>可选页面</li>
                <li class="active">安全指标详情</li>
                <li>可选页面</li>
            </ul>
            <div class="mainContentv clearfix">
                <div class="pannel_main">
                    <div class="tips">
                        <ul class="nav1 clearfix">
                            <li><img src="../../content/default/image/all.png">全部</li>
                            <li><img src="../../content/default/image/dianli.png">电力板块</li>
                            <li><img src="../../content/default/image/mt.png">煤炭板块</li>
                            <li class="active"><img src="../../content/default/image/zz.png">装备制造</li>
                            <li><img src="../../content/default/image/jz.png">工程建设</li>
                        </ul>
                    </div>
                    <div class="topCentent">
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">检查类型：</label>
                            <ul class="yearsUl clearfix">
                                <li class="active">全部</li>
                                <li>集团层级</li>
                                <li>分子公司层级</li>
                                <li>基层单位层级</li>
                            </ul>
                        </div>
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">检查类型：</label>
                            <ul class="yearsUl">
                                <li class="active">全部</li>
                                <li>日常安全检查</li>
                                <li>专项安全检查</li>
                                <li>综合安全检查</li>
                                <li>季节性安全检查</li>
                                <li>节假日安全性检查</li>
                            </ul>
                        </div>
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">企业类型：</label>
                            <ul class="yearsUl">
                                <li class="active">全部</li>
                                <li>火电</li>
                                <li>水电</li>
                                <li>风电</li>
                                <li>太阳能</li>
                                <li>光伏</li>
                            </ul>
                        </div>
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">选择日期：</label>
                            <div class="layui-form-item">
                                <div style="float: left;">
                                    <div class="layui-input-block" style="margin-left: 0">
                                        <input lay-verify="required" placeholder="" id="test1" class="layui-input">
                                        <img src="../../content/default/image/rili.png" class="timeIcon">
                                    </div>
                                </div>
                                <div style="float: right; ">
                                    <label class="layui-form-label" style="width: 30px">~</label>
                                    <div class="layui-input-block" style="margin-left: 40px">
                                        <input lay-verify="required" placeholder="" id="test2" class="layui-input">
                                        <img src="../../content/default/image/rili.png" class="timeIcon">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="selectedDiv">
                            <span class="chosen" style="float: left">已选条件：</span>
                            <ul class="nav2 clearfix fl">
                                <li>集团层级</li>
                                <li>火电</li>
                            </ul>
                            <span class="emptyAll">清空</span>
                        </div>
                        <i class="downward"></i>
                    </div>
                    <div class="pannel_maincontent">
                        <div class="operator_bar">
                            <div class="btnGroup" style="float: left;">
                                <button class=" btn">新增</button>
                                <button class="deleBtn btn">删除</button>
                                <button class="btn">导出</button>
                                <button class="doMore btn" style="width: 55px;">···</button>
                                <ul class="moreList">
                                    <li>批量删除</li>
                                    <li>导出</li>
                                    <li>操作1</li>
                                </ul>
                            </div>
                            <div class="switch_container">
                                <input placeholder="请输入关键词" class="layui-input">
                                <img src="../../content/default/image/find.png" class="timeIcon1">
                            </div>
                        </div>
                        <table class="layui-hide" lay-skin="line" data-mobile-responsive="false" id="demo"></table>
                        <div id="demo4" style="text-align: center"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="hoverDiv">
    <div class="telescopic"></div>
    <div class="pannel_aside">
        <div class="searchDiv">
            <h2>检查数量统计</h2>
        </div>
        <div class="echartsDiv">
            <div class="echarts1"></div>
        </div>
        <div class="staticWrap">
            <table class="checkTable">
                <tr>
                    <th width="20%">单位检查</th>
                    <th width="13%">检查总次数</th>
                    <th width="10%">日常检查</th>
                    <th width="10%">专项检查</th>
                    <th width="13%">节假日检查</th>
                    <th width="10%">综合检查</th>
                    <th width="14%">季节性检查</th>
                    <th width="10%">其他检查</th>
                </tr>
                <tr>
                    <td>中国华能集团</td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                </tr>
                <tr>
                    <td>中国华能集团</td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                </tr>
                <tr>
                    <td>中国华能集团</td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                </tr>
                <tr>
                    <td>中国华能集团</td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                </tr>
                <tr>
                    <td>中国华能集团</td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                </tr>
                <tr>
                    <td>中国华能集团</td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                </tr>
                <tr>
                    <td>中国华能集团</td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                </tr>
                <tr>
                    <td>中国华能集团</td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                    <td><a>16</a></td>
                </tr>

            </table>
        </div>
    </div>
</div>
</body>
<script src="../../content/common/jquery-3.3.1.min.js"></script>
<script src="../../content/common/echarts.min.js"></script>
<script src="../../content/common/nicescroll.min.js"></script>
<script src="../../content/common/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    //给滚动条
/*

    $("html").niceScroll();
    $('.pannel_aside').niceScroll({
        cursorborder: "",
        cursorcolor: "rgba(0,0,0,.2)",
        boxzoom: false,
        autohidemode: false
    }); //右侧操作区域
*/

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var element = layui.element;
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块

        var laydate = layui.laydate;
        laydate.render({
            elem: "#test1",
            type: "datetime",
            format: "yyyy-MM-dd"
        });
        laydate.render({
            elem: "#test2",
            type: "datetime",
            format: "yyyy-MM-dd"
        });
        //监听Tab切换

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , data: [
                {
                    "label": "<img src=\"../../content/default/image/jz.png\" class='contentImg'>春季大检查",
                    "name": "专项安全检查",
                    "time1": "2019-03-16 至 2019-03-16",
                    "time2": "安全部、花店江苏能源",
                    "time3": "华电安徽能源",
                    "time4": "<div class=\"layui-progress layui-progress-big\">\n" +
                    "  <div class=\"layui-progress-bar\" lay-percent=\"20%\"></div>\n" +
                    "</div>",
                    "time5": "隐患数：<a>4项</a>",
                    "time6": "<button  class='deleBtn1 btn'>删除</button>",
                },
                {
                    "label": "<img src=\"../../content/default/image/dianli.png\" class='contentImg'>保大庆大检查",
                    "name": "专项安全检查",
                    "time1": "2019-03-16 至 2019-03-16",
                    "time2": "安全部、花店江苏能源",
                    "time3": "华电安徽能源",
                    "time4": "<div class=\"layui-progress layui-progress-big\" lay-showPercent=\"true\">\n" +
                    "  <div class=\"layui-progress-bar layui-bg-blue\" lay-percent=\"80%\"></div>\n" +
                    "</div>",
                    "time5": "隐患数：<a>4项</a>",
                    "time6": "<button  class='deleBtn1 btn'>删除</button>",
                },
                {
                    "label": "<img src=\"../../content/default/image/board_icon4.png\" class='contentImg'>迎峰度夏大检查",
                    "name": "专项安全检查",
                    "time1": "2019-03-16 至 2019-03-16",
                    "time2": "安全部、花店江苏能源",
                    "time3": "华电安徽能源",
                    "time4": "<div class=\"layui-progress layui-progress-big\" lay-showPercent=\"true\">\n" +
                    "  <div class=\"layui-progress-bar layui-bg-blue\" lay-percent=\"80%\"></div>\n" +
                    "</div>",
                    "time5": "隐患数：<a>4项</a>",
                    "time6": "<button  class='deleBtn1 btn'>删除</button>",
                },
                {
                    "label": "<img src=\"../../content/default/image/safty.png\" class='contentImg'>迎峰度夏大检查",
                    "name": "专项安全检查",
                    "time1": "2019-03-16 至 2019-03-16",
                    "time2": "安全部、花店江苏能源",
                    "time3": "华电安徽能源",
                    "time4": "<div class=\"layui-progress layui-progress-big\" lay-showPercent=\"true\">\n" +
                    "  <div class=\"layui-progress-bar layui-bg-blue\" lay-percent=\"80%\"></div>\n" +
                    "</div>",
                    "time5": "隐患数：<a>4项</a>",
                    "time6": "<button  class='deleBtn1 btn'>删除</button>",
                },
            ]
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left', width: '3%'},
                {field: 'label', title: '检查名称<i class="orderIcon"></i>', width: '13%'}
                , {field: 'name', title: '检查类型<i class="orderIcon"></i>', width: '12%'}
                , {field: 'time1', title: '检查时间<i class="orderIcon"></i>', width: '12%'}
                , {field: 'time2', title: '检查单位<i class="orderIcon"></i>', width: '15%'}
                , {field: 'time3', title: '被检查单位<i class="orderIcon"></i>', width: '12%'}
                , {field: 'time4', title: '检查进度', width: '10%'}
                , {field: 'time5', title: '隐患信息<i class="orderIcon"></i>', width: '11%'}
                , {field: 'time6', title: '操作<i class="setTable"></i>', width: '12%'}
            ]],
            skin: "line"
            , done: function (res, curr, count) {
                layui.use(['jquery'], function () {
                    var $ = jQuery = layui.$;
                    // 你可以在下面的 js 代码中使用你熟悉的 $, jQuery
                    $("tbody>tr").each(function (i, e) {
                        $(this).click(function () {
                            layer.open({//详情页弹框
                                type: 2,
                                title: '安全检查详情',
                                shadeClose: true,
                                shade: false,
                                maxmin: false, //开启最大化最小化按钮
                                area: ['1048px', '700px'],
                                btn: ['取消', '确认'],
                                content:'安全检查详情.html'
                            });
                            $(this).children().children().find(".layui-bg-red").hide()
                        })
                    })
                })
            }
        });
        laypage.render({
            elem: 'demo4'
            , count: 100
            , theme: '#206dee'
            , first: '首页'
            , last: '尾页'
        });
    });

    $(function () {
        //按钮高亮
        $('.btnGroup .btn').mouseenter(function () {
            $(this).siblings().removeClass('active')
            $(this).toggleClass('active')
        }).mouseleave(function () {
            $(this).toggleClass('active')
        })
        //统计展开和收缩
        $('.telescopic').click(function () {
            $(this).toggleClass('fold').siblings().toggleClass('fold')
            $("pannel_aside").toggleClass('fold').siblings().toggleClass('fold')
            $('#dg').resize()
        })
        $(".downward").click(function(){
            $(this).toggleClass('fold').siblings().toggleClass('fold')
            $("pannel_maintop").toggleClass('fold').siblings().toggleClass('fold')
            $('.selectedDiv').toggle()
        })

        //年份切换
        $('.yearsUl li').click(function () {
            $(this).addClass('active').siblings().removeClass('active')
        })
        $('.doMore').click(function(){
            $('.moreList').toggle()
        })
        $('.nav1 li').click(function(){
            $(this).addClass('active').siblings().removeClass('active')
        })

        echarts1()

        function echarts1() {
            var data3 = [50, 140, 115, 80, 30, 40]
            var option3 = {
                tooltip: {},
                grid: {
                    left: '0',
                    right: '10',
                    bottom: '10%',
                    top: '30%',
                    containLabel: true
                },
                legend: {
                    orient: 'horizontal', // 'vertical'
                    x: 'center', // 'center' | 'left' | {number},
                    y: 'top', // 'center' | 'bottom' | {number},
                    icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
                    data: ['日常检查', '周检查', '专项检查', '月度检查', '季度检查', '半年度检查', '其他检查']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['北京', '山东淄博', '唐山亿山', '北京新机', '北京大兴', '北京洺悦'],
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#5e5e5e',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: false,
                        }
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#5e5e5e',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e4e4e4',
                                type: 'dashed'
                            },

                        }
                    }
                ],
                dataZoom: [{
                    start: 0,
                    end: 100 - 500 / 20,
                    show: true,
                    type: 'slider',
                    xAxisIndex: [0],
                    handleSize: 0,
                    height: 8,
                    left: '0',
                    right: '0',
                    bottom: 0,
                    fillerColor: '#999999',
                    borderRadius: 4,
                    borderColor: '#f4f4f4',
                    backgroundColor: '#f4f4f4',
                    showDataShadow: false,
                    realtime: false,
                    filterMode: 'filter',
                    textStyle: false
                }],
                series: [
                    {
                        name: '日常检查',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [20, 32, 1, 34, 90, 30, 10],
                        itemStyle: {
                            normal: {
                                color: '#00dace',
                            },
                        }
                    },
                    {
                        name: '周检查',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [20, 82, 91, 34, 90, 30, 10],
                        itemStyle: {
                            normal: {
                                color: '#51b3ff'
                            }
                        }
                    },
                    {
                        name: '专项检查',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [50, 32, 1, 54, 90, 30, 10],
                        itemStyle: {
                            normal: {
                                color: '#5181ff'
                            }
                        }
                    }, {
                        name: '月度检查',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [50, 32, 1, 54, 30, 30, 20],
                        itemStyle: {
                            normal: {
                                color: '#958bff'
                            }
                        }
                    }, {
                        name: '季度检查',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [50, 32, 21, 14, 10, 30, 10],
                        itemStyle: {
                            normal: {
                                color: '#ff688d'
                            }
                        }
                    }, {
                        name: '半年度检查',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [10, 22, 21, 15, 10, 33, 4],
                        itemStyle: {
                            normal: {
                                color: '#ff9c00'
                            }
                        }
                    }, {
                        name: '其他检查',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [15, 23, 21, 14, 10, 30, 40],
                        itemStyle: {
                            normal: {
                                color: '#fed100'
                            }
                        }
                    },]
            };
            var chart3 = echarts.init(document.querySelector('.echarts1'));
            chart3.setOption(option3);
            $(window).resize(function () {
                chart3.resize()
            })
        }


    })


</script>

</html>